<template>
  <div class="login-container">
    <li style="display: flex; justify-content: flex-end; width: 100%;">
      <!-- <el-select
        v-model="value4"
        @change="selectLanguage"
        placeholder="请选择"
        size="mini"
        class="inputStyle"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>-->
      <!-- 自定义的变量 -->
      <!-- <div>{{ $t(`message.hello`) }}</div> -->
      <!-- element-ui自带的 -->
      <!-- <div>{{ $t(`el.datepicker.now`) }}</div> -->
      <!-- data参数 -->
      <!-- <div>{{ $t(noMatchData) }}</div> -->
    </li>
    <div class="back_view">
      <div class="login-view">
        <div class="title-container">
          <div>
            <div style="display: flex; align-items: center">
              <div class="title">{{ $t(`message.login.open`) }}</div>
              <img :src="require('../../assets/login/arrow_open.png')" alt />
            </div>
            <div
              :class="value4 == 2 ? 'title title-en' : 'title'"
            >{{ $t(`message.login.title_first`) }}</div>
          </div>
          <div class="bottom-title">
            <img :src="require('../../assets/login/logo_xgh.png')" alt />
            <div
              :class="value4 == 2 ? 'project-name project-name-en' : 'project-name'"
            >{{ $t(`message.projectName`) }}</div>
          </div>
        </div>
        <!-- 接收邀请视图 -->
        <div
          v-if="showInvite"
          class="login-form"
          style="height:339px; border-radius: 20px;"
        >
          <div>
            <div class="login-title-view">
              <div
                class="login-title"
                style="color: #000000;"
              >象过河云进销存</div>
            </div>
            <el-form
              ref="loginForm"
              :model="loginForm"
              class="loginForm"
              label-position="left"
            >
            <el-form-item>
                <div style="margin-top: 30px;line-height: 25px;">邀请人：{{accountName || ''}}</div>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="acceptPhone"
                  placeholder="请输入您的手机号"
                  type="text"
                  class="userinput"
                  style="padding-left: -5px;margin-top: 20px;"
                  maxlength="11"
                ></el-input>
              </el-form-item>
              <el-button
              class="inviteBtn"
                @click.native.prevent="handleAcceptInvite"
              >接受邀请</el-button>
            </el-form>
          </div>
        </div>
        <div v-else class="login-form" :style="{ height: showRegisterForm ? '550px' : '474px' }">
          <!-- 注册账号 -->
          <div v-show="showRegisterForm">
            <div class="login-title" style="color: #1890fc">注册账号</div>
            <el-form
              ref="registerForm"
              :model="registerForm"
              :rules="registerRules"
              class="loginForm"
              label-position="left"
            >
              <el-form-item prop="username">
                <!-- <span class="svg-container">
                <svg-icon icon-class="user" />
                </span>-->
                <el-input
                  autocomplete="off"
                  ref="username"
                  v-model="registerForm.username"
                  placeholder="请输入您的手机号"
                  name="username"
                  type="text"
                  tabindex="1"
                  class="userinput"
                  maxlength="11"
                ></el-input>
              </el-form-item>
              <div style="display: flex">
                <el-form-item prop="msgcode">
                  <!-- <span class="svg-container">
                <svg-icon icon-class="password" />
                  </span>-->
                  <!-- 验证码 -->
                  <el-input
                    ref="msgcode"
                    v-model="registerForm.msgcode"
                    placeholder="请输入短信验证码"
                    name="msgcode"
                    type="text"
                    tabindex="2"
                    class="userinput codeinput"
                  ></el-input>
                </el-form-item>
                <el-button
                  v-if="time == 60"
                  :loading="getCodeLoading"
                  class="codeinput btn-sendmsg"
                  @click="getCode(1)"
                >获取验证码</el-button>
                <el-button
                  v-else
                  type="text"
                  class="codeinput btn-sendmsg"
                  style="background-color: #eee;color: #333;"
                >
                  {{
                  time }}
                </el-button>
              </div>
              <el-form-item prop="password">
                <el-input
                  ref="password"
                  v-model="registerForm.password"
                  :type="rpFlag ? 'password' : 'text'"
                  placeholder="设置密码"
                  name="password"
                  tabindex="3"
                  class="userinput pwdinput"
                >
                  <img
                    slot="suffix"
                    style="width: 32px; height: 32px; margin-top: 5px;"
                    :src="!rpFlag ? require('../../assets/login/lookeye.png') : require('../../assets/login/lookno.png')"
                    @click="rpFlag = !rpFlag"
                  />
                </el-input>
              </el-form-item>
              <el-form-item prop="passwordAgain">
                <el-input
                  ref="passwordAgain"
                  v-model="registerForm.passwordAgain"
                  :type="repFlag ? 'password' : 'text'"
                  placeholder="请再次输入密码"
                  name="passwordAgain"
                  tabindex="4"
                  class="userinput pwdinput"
                >
                  <img
                    slot="suffix"
                    style="width: 32px; height: 32px; margin-top: 5px;"
                    :src="!repFlag ? require('../../assets/login/lookeye.png') : require('../../assets/login/lookno.png')"
                    @click="repFlag = !repFlag"
                  />
                </el-input>
              </el-form-item>
              <div class="agreement-view">
                <el-checkbox v-model="checked"></el-checkbox>
                <span class="readtext" style="margin-left: 5px">已阅读并同意</span>
                <span class="agreement" @click="toUserXieyi">《用户协议》</span>
                <span class="readtext">和</span>
                <span class="agreement" @click="toYinsiZhengce">《隐私政策》</span>
              </div>
              <el-button
                :loading="loading"
                type="primary"
                style="width: 100%; margin-top: 30px; display: inline-block;height: 50px;"
                @click.native.prevent="handleRegister"
                @keyup.enter="keyDown(e)"
              >注&nbsp;&nbsp;册</el-button>
              <div class="go-login-tip">
                <span class="has-account">已有账号？</span>
                <span class="go-login" @click="switchLogin">登录</span>
              </div>

              <!-- <div class="tips">
              <span style="margin-right: 20px">{{ $t(`message.login.userName`) }}: admin</span>
              <span> {{ $t(`message.login.password`) }}: any</span>
              </div>-->
            </el-form>
          </div>
          <!-- 忘记密码 -->
          <div v-show="showForgetForm">
            <div class="login-title" style="color: #1890fc">忘记密码</div>
            <el-form
              ref="forgetForm"
              :model="forgetForm"
              :rules="forgetRules"
              class="loginForm"
              label-position="left"
            >
              <el-form-item prop="username">
                <!-- <span class="svg-container">
                <svg-icon icon-class="user" />
                </span>-->
                <el-input
                  ref="username"
                  v-model="forgetForm.username"
                  placeholder="请输入您的手机号"
                  name="username"
                  type="text"
                  tabindex="1"
                  class="userinput"
                  maxlength="11"
                ></el-input>
              </el-form-item>
              <div style="display: flex">
                <el-form-item prop="msgcode">
                  <!-- <span class="svg-container">
                <svg-icon icon-class="password" />
                  </span>-->
                  <!-- 验证码 -->
                  <el-input
                    ref="msgcode"
                    v-model="forgetForm.msgcode"
                    placeholder="请输入短信验证码"
                    name="msgcode"
                    type="text"
                    tabindex="2"
                    class="userinput codeinput"
                  ></el-input>
                </el-form-item>
                <el-button
                  v-if="time == 60"
                  :loading="getCodeLoading"
                  class="codeinput btn-sendmsg"
                  @click="getCode(2)"
                >获取验证码</el-button>
                <el-button
                  v-else
                  type="text"
                  class="codeinput btn-sendmsg"
                  style="background-color: #eee;color: #333;"
                >
                  {{
                  time }}
                </el-button>
              </div>
              <el-form-item prop="password">
                <el-input
                  ref="password"
                  v-model="forgetForm.password"
                  :type="fpFlag ? 'password' : 'text'"
                  placeholder="请输入新的密码"
                  name="password"
                  tabindex="3"
                  class="userinput pwdinput"
                >
                  <img
                    slot="suffix"
                    style="width: 32px; height: 32px; margin-top: 5px;"
                    :src="!fpFlag ? require('../../assets/login/lookeye.png') : require('../../assets/login/lookno.png')"
                    @click="fpFlag = !fpFlag"
                  />
                </el-input>
              </el-form-item>
              <div class="agreement-view"></div>

              <el-button
                :loading="loading"
                type="primary"
                style="width: 100%; margin-top: 30px; display: inline-block;height: 50px;"
                @click.native.prevent="handleResetpwd"
                @keyup.enter="keyDown(e)"
              >完&nbsp;&nbsp;成</el-button>
              <div class="go-login-tip">
                <span class="has-account">已有账号？</span>
                <span class="go-login" @click="switchLogin">登录</span>
              </div>

              <!-- <div class="tips">
              <span style="margin-right: 20px">{{ $t(`message.login.userName`) }}: admin</span>
              <span> {{ $t(`message.login.password`) }}: any</span>
              </div>-->
            </el-form>
          </div>
          <!-- 登录表单 -->
          <div v-show="showLoginForm">
            <div class="login-title-view">
              <div
                class="login-title"
                :class="loginTab == 1 ? 'bluetext' : 'greeytext'"
                @click="switchLoginMethod(1)"
              >账号登录</div>
              <div style="width: 1px; background: #dddddd; opacity: 1; height: 20px; margin-top: 38px"></div>
              <div class="login-title" :class="loginTab == 2 ? 'bluetext' : 'greeytext'" @click="switchLoginMethod(2)">
              扫码登录</div>
            </div>
            <!-- 账号登陆 -->
            <el-form
              v-if="loginTab == 1"
              ref="loginForm"
              :model="loginForm"
              :rules="loginRules"
              class="loginForm"
              label-position="left"
            >
              <el-form-item prop="username">
                <!-- <span class="svg-container">
                <svg-icon icon-class="user" />
                </span>-->

                <el-input
                  ref="username"
                  v-model="loginForm.username"
                  placeholder="请输入您的手机号"
                  name="username"
                  type="text"
                  tabindex="1"
                  class="userinput"
                  @focus="loginAFocus = true"
                  @blur="loginAFocus = false"
                  style="padding-left: -5px;"
                  maxlength="11"
                >
                  <img
                    class="preimg"
                    slot="prefix"
                    :src="require('../../assets/login/login_user.png')"
                  />
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <!-- <span class="svg-container">
                <svg-icon icon-class="password" />
                </span>-->
                <el-input
                  :type="lpFlag ? 'password' : 'text'"
                  ref="loginPassword"
                  v-model="loginForm.password"
                  placeholder="请输入您的登录密码"
                  name="password1"
                  tabindex="3"
                  class="userinput"
                  @focus="loginPFocus = true"
                  @blur="loginPFocus = false"
                  style="padding-left: -5px;"
                >
                  <img
                    class="preimg pwdimg"
                    slot="prefix"
                    :src="require('../../assets/login/login_pwd.png')"
                  />
                  <img
                    slot="suffix"
                    style="width: 32px; height: 32px; margin-top: 5px;"
                    :src="!lpFlag ? require('../../assets/login/lookeye.png') : require('../../assets/login/lookno.png')"
                    @click="lpFlag = !lpFlag"
                  />
                </el-input>
                <!-- <div class="eye-container" @click="passwordTypeChange">
                  <img v-if="passwordType == 'password'" src="@/assets/visible.png" alt />
                  <img v-else src="@/assets/sightless.png" alt />
                </div>-->
              </el-form-item>
              <div class="agreement-view">
                <el-checkbox v-model="checked"></el-checkbox>
                <span class="readtext" style="margin-left: 5px">已阅读并同意</span>
                <span class="agreement" @click="toUserXieyi">《用户协议》</span>
                <span class="readtext">和</span>
                <span class="agreement" @click="toYinsiZhengce">《隐私政策》</span>
              </div>
              <div class="agreement-view" style="margin-top: 38px">
                <el-checkbox v-model="autoLogin" style="font-size: 14px;">自动登录</el-checkbox>
                <div style="flex: 1"></div>
                <div class="forgetpwd-text" style @click="switchRegister">立即注册</div>
                <div class="forgetpwd-text" @click="switchForgetPwd">忘记密码？</div>
              </div>

              <el-button
                :loading="loading"
                type="primary"
                style="width: 100%; margin-top: 21px; display: inline-block;height: 50px;"
                @click.native.prevent="handleLogin"
                @keyup.enter="keyDown(e)"
              >登&nbsp;&nbsp;录</el-button>

              <!-- <div class="tips">
              <span style="margin-right: 20px">{{ $t(`message.login.userName`) }}: admin</span>
              <span> {{ $t(`message.login.password`) }}: any</span>
              </div>-->
            </el-form>
            <div v-if="loginTab == 2">
              <div class="qrCode">
                <div class="qrcode-view">
                  <template v-if="scanSuccess">
                    <div class="scan-success">
                      <div class="success-icon">
                        <i class="el-icon-check"></i>
                      </div>
                      <div class="success-text">扫码成功</div>
                    </div>
                  </template>
                  <template v-else>
                    <img style="width: 100%;" :src="'data:image/png;base64,'+qrcodeData.base64Image" alt="二维码">
                    <img style="position: absolute; top: calc(50% - 20px);left: calc(50% - 20px);width: 40px;" src="../../assets/login/qrcode-logo.png" alt="">
                  </template>
                </div>
              </div>
              <div class="agreement-view" style="margin-top: 15px">
                <div style="display: flex;align-items: center;justify-content: center; margin:0 auto; color: #3370ff;font-size: 15px;"
                @click="refreshQrcode"
                :class="{ 'disabled-btn': refreshQrcodeLoading }"
                :style="{ cursor: refreshQrcodeLoading ? 'not-allowed' : 'pointer' }"
                >
                  <i class="el-icon-refresh-right" :class="{ 'is-loading': refreshQrcodeLoading }" style="font-size: 18px;"></i> 
                  {{ refreshQrcodeLoading ? '刷新中...' : '刷新二维码' }}
                </div>
                <div style="display: flex;align-items: center;justify-content: center;width: 100%;margin-top: 15px;">
                  <img src="../../assets/login/qrcode_login.png" alt="" style="width: 23px;height: 23px;margin-right: 10px;">
                  <span style="font-size: 18px;color: #707070;">打开<span style="color: #000;font-weight: bold;">云进销存APP</span>扫码登录</span>
                </div>
              </div>
              <!-- <div class="other-login">
                <span class="other-login-text">其他登录方式</span>
                <img
                  class="other-login-img"
                  :src="otherLoginIndex == 1
                  ? require('../../assets/login/icon_wechat_clicked.png')
                  : require('../../assets/login/wechat_login.png')
                  "
                  alt
                  style="margin-left: 17px"
                  @click="clickOtherLogin(1)"
                />
                <img
                  class="other-login-img"
                  :src="otherLoginIndex == 2
                  ? require('../../assets/login/icon_qq_clicked.png')
                  : require('../../assets/login/qq_login.png')
                  "
                  alt
                  style="margin-left: 15px"
                  @click="clickOtherLogin(2)"
                />
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername, isMobile } from '@/utils/validate'
import { getAction, postAction } from '@/api/manage'
import { setToken } from '@/utils/auth'
import { mapActions } from 'vuex'
import Axios from 'axios'
import Vue from 'vue'
import {
  ACCESS_TOKEN,
  USER_NAME,
  USER_INFO,
  ENCRYPTED_STRING,
  ACCOUNT_BOOK,
} from '@/store/mutation-types'
import { timeFix } from '@/utils/util'
export default {
  name: 'Login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    const validateMsgcode = (rule, value, callback) => {
      if (value.length < 4) {
        callback(new Error('请输入正确的验证码!'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('登录密码不能少于6位!'))
      } else if (value.length > 16) {
        callback(new Error('登录密码不能多于16位!'))
      } else {
        callback()
      }
    }

    const validatePasswordAgain = (rule, value, callback) => {
      if (value != this.registerForm.password) {
        callback(new Error('两次输入密码不一致！'))
      } else {
        callback()
      }
    }

    return {
      loginAFocus: false,
      loginPFocus: false,
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [
          { required: true, message: '请输入您的手机号!' },
          { trigger: ['blur', 'change'], validator: validateUsername },
        ],
        password: [
          { required: true, message: '请输入6-16位密码!' },
          { trigger: ['blur', 'change'], validator: validatePassword },
        ],
      },
      forgetForm: {
        username: '',
        password: '',
        msgcode: '',
      },
      forgetRules: {
        username: [
          { required: true, message: '请输入您的手机号!' },
          { trigger: ['blur', 'change'], validator: validateUsername },
        ],
        msgcode: [
          { required: true, message: '请输入您的短信验证码!' },
          { trigger: ['blur', 'change'], validator: validateMsgcode },
        ],
        password: [
          { required: true, message: '请输入6-16位密码!' },
          { trigger: ['blur', 'change'], validator: validatePassword },
        ],
      },
      registerForm: {
        username: '',
        password: '',
        msgcode: '',
      },
      registerRules: {
        username: [
          { required: true, message: '请输入您的手机号!' },
          { trigger: ['blur', 'change'], validator: validateUsername },
        ],
        msgcode: [
          { required: true, message: '请输入您的短信验证码!' },
          { trigger: ['blur', 'change'], validator: validateMsgcode },
        ],
        password: [
          { required: true, message: '请输入6-16位密码!' },
          { trigger: ['blur', 'change'], validator: validatePassword },
        ],
        passwordAgain: [
          { required: true, message: '请输入6-16位密码!' },
          { trigger: ['blur', 'change'], validator: validatePasswordAgain },
        ],
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      options: [
        {
          value: '1',
          label: '中文',
        },
        {
          value: '3',
          label: '繁体',
        },
        {
          value: '2',
          label: 'EN',
        },
      ],
      value4: '1',
      langcn: 'cn',
      langen: 'en',
      langtw: 'tw',
      noMatchData: '',
      checked: true,
      showRegisterForm: false,
      loginTab: 1,
      autoLogin: true,
      showForgetForm: false,
      showLoginForm: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      otherLoginIndex: -1,
      selectIds: [], // 选中的权限id
      buttonsList: [], // 所有权按钮权限集合
      loginUserInfo: {}, //登陆用户信息
      time: 60,
      timer: null,
      getCodeLoading: false,

      lpFlag: true, // 登录密码是否可见
      rpFlag: true, // 注册密码是否可见
      repFlag: true, // 注册确认密码是否可见
      fpFlag: true, // 忘记密码是否可见

      ipAddress: '',
      ipLocation: '',

      //账套邀请-start
      showInvite: false,
      accountName: '', //账套名
      acceptPhone: '', //接受人账号
      abCode: '', //邀请账套
      qrcodeData: '', //二维码登录
      refreshQrcodeLoading: false, // 添加刷新二维码的加载状态
      lastRefreshTime: 0, // 上次刷新的时间戳
      scanSuccess: false, // 扫码是否成功
      //账套邀请-end
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true,
    },
  },
  created () {
    // console.log(cityjson.returnCitySN);
    let query = this.$route.query
    console.log(query);
    if (query && query.hasOwnProperty('abCode')) {
      this.abCode = query.abCode || ''
      if (this.abCode) {
        this.showInvite = true
        this.showLoginForm = false
        getAction('/accountbookinfo/xghAccountBook/getNameById', {id: this.abCode}).then(res => {
            console.log(res);
            if (res.success) {
              this.accountName = res.result || ''
            } else {
              this.$elMessage.error(res.message)
            }
          })
      }
    }


    console.log(this.$i18n.locale)
    switch (this.$i18n.locale) {
      case 'cn':
        this.value4 = '1'
        break
      case 'en':
        this.value4 = '2'
        break
      case 'tw':
        this.value4 = '3'
        break

      default:
        break
    }
    this.getIp()
  },
  mounted () {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed () {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    ...mapActions(['Login']),

    getIp () {
      Axios.request({
        url: 'https://api.ipify.org/?format=json',
        method: 'get'
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          let data = res.data && res.data.ip
          this.ipAddress = data
          console.log('ip地址:', data);
          this.getLocation()
        }
      })
    },
    getLocation () {
      fetch(`https://ipinfo.io/${this.ipAddress}?token=7c2301a8c51554`)
        .then(response => response.json())
        .then(data => {
          this.ipLocation = `${data.city}, ${data.region}, ${data.country}`
          console.log('地理位置:', `${data.city}, ${data.region}, ${data.country}`);
        })
        .catch(error => console.error('获取IP地址和地理位置信息失败', error));
    },
    passwordTypeChange () {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    showPwd () {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 点击回车键登录
    keyDown (e) {
      // 回车则执行登录方法 enter键的ASCII是13
      // if (e.keyCode == 13 || e.keyCode == 100) {
      //   if (this.showRegisterForm) {
      //     // 注册
      //     this.handleRegister()
      //   } else if (this.showLoginForm) {
      //     // let input = this.$refs.loginPassword
      //     // console.log(input.rec);
      //     // 登录
      //     this.handleLogin()
      //   } else if (this.showForgetForm) {
      //     // 忘记密码
      //     this.handleResetpwd()
      //   }
      // }
      if (e.keyCode == 13) {
        if (this.showLoginForm) {
          if (this.loginAFocus) {
            let input = this.$refs.loginPassword
            input.focus()
          } else if (this.loginPFocus) {
            // 登录
            this.handleLogin()
          }
        }
      }
    },
    loginPasswordIn (val) {
      console.log('密码框获取焦点');
      this.loginFocus = true
    },
    loginPasswordOut () {
      console.log('密码框失去焦点');
      this.loginFocus = false
    },
    handleLogin () {
      if (!this.checked) {
        this.$elMessage.warning('请您阅读并同意用户协议和隐私政策!')
        return
      }
      const that = this
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          let params = {
            username: this.loginForm.username,
            password: this.loginForm.password,
            loginType: '1',
          }
          this.Login(params).then((res) => {
            that.loading = false
            if (res.success) {
              // that.$router.push({ name: 'home' })
              that.$lcStorage.set('xghUser', res.result.userInfo)
              // that.loginUserInfo = res.result.sysUser
              // that.getRolePermitList()
              // 缓存用户权限
              console.log(res);
              let userPerms = res.result.userPerms || {}
              that.$lcStorage.set('userPermissions', userPerms)
              // 增加账套到期标识
              Vue.ls.set('account-no-money', false)
              that.loginSuccess()
            } else {
              that.$elMessage.warning(res.message)
            }
          }, (err) => {
            if (err.code == '414') {
              // 增加账套到期标识
              Vue.ls.set('account-no-money', true)
              // 设置token和账套id
              Vue.ls.set(ACCESS_TOKEN, err.result.token, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(ACCOUNT_BOOK, { id: err.result.xghAccountBookId }, 7 * 24 * 60 * 60 * 1000)
              // 设置用户信息
              const userInfo = err.result.userInfo
              Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
              // 跳转到续费页面
              that.$router.push({ path: '/setting/buy/accountBookPay' }).catch((err) => {
                console.log(err)
              })
            } else {
              that.loading = false
              that.$elMessage.warning(err.message)
            }
          })
        }
      })
    },
    //登录成功
    loginSuccess () {
      // 判断是跳首页还是跳创建和选择账套页面
      console.log('判断跳首页还是跳账套页')
      let bookId = Vue.ls.get(ACCOUNT_BOOK) || {}
      console.log(bookId,'------bookId')
      if (!bookId || !bookId.id) {
        console.log('发消息跳转到创建账套')
        // 发送消息
        // this.$EventBus.$emit('ISLOGIN', false)
        this.$router.push({ path: '/user/account' }).catch(() => {
          console.log('')
        })
      } else {
        this.$router.push({ path: '/dashboard/analysis' }).catch((err) => {
          console.log(err);
          console.log('登录跳转首页出错,这个错误从哪里来的')
        })
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`,
        })
      }
    },
    // 获取角色权限列表
    getRolePermitList () {
      getAction('/xghMenu/menuList', {
        type: 1, // 用户角色区分 0.角色权限 1.用户权限
        userOrRoleId: this.loginUserInfo.id,
      }).then((res) => {
        if (res.success) {
          // 此处有修改
          // 原来的代码 没有注下面一行
          // this.selectIds = [...res.result.checkIds, ...res.result.checkElseIds]
          if (res.result.menus && res.result.menus.length > 0) {
            // 给菜单添加状态字段
            let menus = this.handleMenus(res.result.menus)
            menus.forEach((element) => {
              if (element.name == '其他管理权限') {
                // 缓存用户其他管理权限
                this.$lcStorage.set('userOtherPermissions', element.children || [])
              }
            })
            // 取菜单中的子数据存储到缓存中
            let subList = this.getSubMenus(menus)
            console.log('sublist: ', subList)
            // 缓存用户权限
            this.$lcStorage.set('userPermissions', subList)
          }
        }
      })
    },
    // 给菜单添加状态字段
    handleMenus (data) {
      data.forEach((item) => {
        // 此处有修改
        item['checked'] = true
        // for (let i = 0; i < this.selectIds.length; i++) {
        //   if (this.selectIds[i] == item.id) {
        //     item['checked'] = true
        //   }
        // }
        // // 原来的代码
        // item['checked'] = false
        // for (let i = 0; i < this.selectIds.length; i++) {
        //   if (this.selectIds[i] == item.id) {
        //     item['checked'] = true
        //   }
        // }
        if (item.children || item.buttons) {
          this.handleMenus(item.children || item.buttons)
        }
      })
      return data
    },
    // 取菜单中的子数据存储到缓存中
    getSubMenus (data) {
      data.forEach((item) => {
        // 如果当前循环的数据中有button，则存存储
        if (item.buttons) {
          this.buttonsList.push(item)
        } else {
          if (item.children) {
            this.getSubMenus(item.children)
          }
        }
      })
      return this.buttonsList
    },
    handleRegister () {
      let searchEngine = localStorage.getItem('referrer') //搜索引擎
      let browserType = this.matchVersion().browser //浏览器
      let operatingSystem = this.getUserOsInfo() //操作系统
      let searchKeyword = ''  //搜索关键字
      let sourceInfoVo = {
        searchEngine,
        browserType,
        operatingSystem,
        searchKeyword,
        ipAddress: this.ipAddress,
        ipLocation: this.ipLocation
      }
      console.log(sourceInfoVo);
      if (!this.checked) {
        this.$elMessage.warning('请您阅读并同意用户协议和隐私政策!')
        return
      }
      const that = this
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          let params = {
            password: this.registerForm.password,
            phone: this.registerForm.username,
            smsCode: this.registerForm.msgcode,
            invitationCode: this.$route.query.invitationCode, // 邀请码
            sourceInfoVo,
            abCode: this.abCode,
          }
          postAction('/accountbookinfo/xghAccountBook/register', params).then(res => {
            console.log(res);
            if (res.success) {
              this.$elMessage.success(res.result)
              this.switchLogin()
            } else {
              this.$elMessage.error(res.message)
            }
          })
        } else {
          return false;
        }
      });
    },
    handleResetpwd () {
      this.$refs.forgetForm.validate((valid) => {
        if (valid) {
          let params = {
            password: this.forgetForm.password,
            phone: this.forgetForm.username,
            smsCode: this.forgetForm.msgcode
          }
          postAction('/accountbookinfo/xghAccountBook/changePwdByCode', params).then(res => {
            console.log(res);
            if (res.success) {
              this.$elMessage.success(res.result)
              this.switchLogin()
            } else {
              this.$elMessage.error(res.message)
            }
          })
        } else {
          return false;
        }
      })
    },
    // 切换语言
    selectLanguage () {
      switch (this.value4) {
        case '1':
          this.$i18n.locale = this.langcn
          localStorage.lang = this.langcn
          break
        case '2':
          this.$i18n.locale = this.langen
          localStorage.lang = this.langen
          break
        case '3':
          this.$i18n.locale = this.langtw
          localStorage.lang = this.langtw
          break

        default:
          break
      }
      console.log(this.$i18n.messages.en.message.hello)
    },
    // 切换到登录表单
    switchLogin () {
      this.showRegisterForm = false
      this.showLoginForm = true
      this.showForgetForm = false
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
        this.time = 60
      }
    },
    // 刷新二维码 (添加节流)
    refreshQrcode(){
      // 节流 - 3秒内只能刷新一次
      const now = Date.now()
      const throttleTime = 3000 // 节流时间为3秒
      
      if (this.refreshQrcodeLoading || (now - this.lastRefreshTime < throttleTime)) {
        // this.$elMessage.warning('操作频繁，请稍后再试')
        return
      }
      
      this.refreshQrcodeLoading = true
      this.lastRefreshTime = now
      
      // 清除定时器并获取新的二维码
      clearInterval(this.timer)
      this.handleQrcodeLogin()
      
      // 设置2秒后恢复按钮状态
      setTimeout(() => {
        this.refreshQrcodeLoading = false
      }, 2000)
      this.scanSuccess = false
    },
    //切换登录方式
    switchLoginMethod (index) {
      if(this.loginTab === 2 && index === 2) return
      this.loginTab = index
      // 避免重复点击扫码登录
      if(index === 2){
        this.handleQrcodeLogin()
      }else{
        clearInterval(this.timer)
      }
      this.otherLoginIndex = -1
      this.scanSuccess = false
    },
    handleQrcodeLogin(){
      getAction('/sys/getCode').then(res => {
        if(res.success){
          this.qrcodeData = res.result
          this.handleGetLoginStatus()
        }
      })
    },
    handleGetLoginStatus(){
      console.log("进入定时器执行逻辑")
      this.timer = setInterval(() => {
        postAction('/sys/getScanCodeLogin', {
          code: this.qrcodeData.code,
          ip: this.qrcodeData.ip,
          loginType: 1
        }).then((res) => {
          if(res.code === 200){
            console.log('清除定时器 设置扫码成功状态')
            clearInterval(this.timer)
            // 设置扫码成功状态
            this.scanSuccess = true
            console.log("设置成功状态")
            // 延迟1秒后执行登录逻辑
            setTimeout(() => {
              this.loading = false
              console.log("成功---=")
              if (res.success) {
                this.$lcStorage.set('xghUser', res.result.userInfo)
                let userPerms = res.result.userPerms || {}
                this.$lcStorage.set('userPermissions', userPerms)
                Vue.ls.set('account-no-money', false)
                Vue.ls.set(ACCESS_TOKEN, res.result.token, 7 * 24 * 60 * 60 * 1000)
                Vue.ls.set(ACCOUNT_BOOK, { id: res.result.accountBookId }, 7 * 24 * 60 * 60 * 1000)
                const userInfo = res.result.userInfo
                Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
                Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
                this.loginSuccess()
              } else {
                this.$elMessage.warning(res.message)
              }
            }, 2000)
          }else if(res.code !== 200){
            return
          }
          this.loading = false
            if (!res.success) {
              this.$elMessage.warning(res.message)
            }
          }, (err) => {
            if (err.code == '414') {
              // 增加账套到期标识
              Vue.ls.set('account-no-money', true)
              // 设置token和账套id
              Vue.ls.set(ACCESS_TOKEN, err.result.token, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(ACCOUNT_BOOK, { id: err.result.xghAccountBookId }, 7 * 24 * 60 * 60 * 1000)
              // 设置用户信息
              const userInfo = err.result.userInfo
              Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
              // 跳转到续费页面
              this.$router.push({ path: '/setting/buy/accountBookPay' }).catch((err) => {
                console.log(err)
              })
            } else {
              this.loading = false
              this.$elMessage.warning(err.message)
            }
          })
        
      }, 3000);
    },
    handleQrcodeLogin(){
      getAction('/sys/getCode').then(res => {
        if(res.success){
          this.qrcodeData = res.result
          this.handleGetLoginStatus()
        }
      })
    },
    handleGetLoginStatus(){
      console.log("进入定时器执行逻辑")
      this.timer = setInterval(() => {
        postAction('/sys/getScanCodeLogin', {
          code: this.qrcodeData.code,
          ip: this.qrcodeData.ip,
          loginType: 1
        }).then((res) => {
          if(res.code === 200){
            console.log('清除定时器')
            clearInterval(this.timer)
          }else if(res.code !== 200){
            return
          }
          this.loading = false
            if (res.success) {
              // that.$router.push({ name: 'home' })
              this.$lcStorage.set('xghUser', res.result.userInfo)
              // that.loginUserInfo = res.result.sysUser
              // that.getRolePermitList()
              // 缓存用户权限
              console.log(res);
              let userPerms = res.result.userPerms || {}
              this.$lcStorage.set('userPermissions', userPerms)
              // 增加账套到期标识
              Vue.ls.set('account-no-money', false)
              // 设置token和账套id
              Vue.ls.set(ACCESS_TOKEN, res.result.token, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(ACCOUNT_BOOK, { id: res.result.accountBookId }, 7 * 24 * 60 * 60 * 1000)
              // 设置用户信息
              const userInfo = res.result.userInfo
              Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)

              this.loginSuccess()
            } else {
              this.$elMessage.warning(res.message)
            }
          }, (err) => {
            if (err.code == '414') {
              // 增加账套到期标识
              Vue.ls.set('account-no-money', true)
              // 设置token和账套id
              Vue.ls.set(ACCESS_TOKEN, err.result.token, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(ACCOUNT_BOOK, { id: err.result.xghAccountBookId }, 7 * 24 * 60 * 60 * 1000)
              // 设置用户信息
              const userInfo = err.result.userInfo
              Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
              Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
              // 跳转到续费页面
              this.$router.push({ path: '/setting/buy/accountBookPay' }).catch((err) => {
                console.log(err)
              })
            } else {
              this.loading = false
              this.$elMessage.warning(err.message)
            }
          })
        
      }, 3000);
    },
    switchRegister () {
      this.showRegisterForm = true
      this.showLoginForm = false
      this.showForgetForm = false
    },
    switchForgetPwd () {
      this.showForgetForm = true
      this.showRegisterForm = false
      this.showLoginForm = false
    },
    onSubmit () { },
    clickOtherLogin (index) {
      this.otherLoginIndex = index
    },
    getCode (type) {
      let phone = type == 1 ? this.registerForm.username : this.forgetForm.username
      if (!phone) {
        this.$elMessage.error('请输入手机号！')
        return
      } else if (!isMobile(phone)) {
        this.$elMessage.error('请输入正确的手机号！')
        return
      }
      this.getCodeLoading = true
      let params = {
        mobile: phone,
        smsMode: type
      }
      postAction('/sys/smsMessage', params).then(res => {
        console.log(res);
        if (res.success) {
          this.$elMessage.success('验证码已发送，请注意查收！')
          this.getTime()
        } else {
          this.$elMessage.error(res.message)
          this.getCodeLoading = false
        }
      })
    },
    getTime () {
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.getCodeLoading = false
          this.time--
          if (this.time === 0) {
            clearInterval(this.timer)
            this.time = 60
            this.timer = null
          }
        }, 1000)
      }
    },
    // 跳转到用户协议
    toUserXieyi () {
      window.open('http://minio.fangshangqu.net/xghmodule/xieyizhengce/%E8%B1%A1%E8%BF%87%E6%B2%B3%E4%BA%91%E8%BF%9B%E9%94%80%E5%AD%98%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.html')
    },
    // 跳转到隐私政策
    toYinsiZhengce () {
      window.open('http://minio.fangshangqu.net/xghmodule/xieyizhengce/%E8%B1%A1%E8%BF%87%E6%B2%B3%E4%BA%91%E8%BF%9B%E9%94%80%E5%AD%98%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.html')
    },
    getIP (json) {
      console.log(json);
    },
    matchVersion () {
      const userAgent = window.navigator.userAgent
      const rMsie = /(msie\s|trident.*rv:)([\w.]+)/
      const rEdge = /(edg)\/([\w.]+)/
      const rFirefox = /(firefox)\/([\w.]+)/
      const rOpera = /(opera).+version\/([\w.]+)/
      const rChrome = /(chrome)\/([\w.]+)/
      const rSafari = /version\/([\w.]+).*(safari)/
      const ua = userAgent.toLowerCase()
      var match = rMsie.exec(ua)
      if (match !== null) {
        return {
          browser: 'IE',
          version: match[2] || '0'
        }
      }
      var rEmatch = rEdge.exec(ua)
      if (rEmatch !== null) {
        return {
          browser: 'Edge',
          version: rEmatch[2] || '0'
        }
      }
      var rFmatch = rFirefox.exec(ua)
      if (rFmatch !== null) {
        return {
          browser: rFmatch[1] || '',
          version: rFmatch[2] || '0'
        }
      }
      var rOmatch = rOpera.exec(ua)
      if (rOmatch !== null) {
        return {
          browser: rOmatch[1] || '',
          version: rOmatch[2] || '0'
        }
      }
      var rCmatch = rChrome.exec(ua)
      if (rCmatch !== null) {
        return {
          browser: rCmatch[1] || '',
          version: rCmatch[2] || '0'
        }
      }
      var rSmatch = rSafari.exec(ua)
      if (rSmatch !== null) {
        return {
          browser: rSmatch[2] || '',
          version: rSmatch[1] || '0'
        }
      }
      if (match !== null) {
        return {
          browser: '',
          version: '0'
        }
      }
    },
    getUserOsInfo () {
      const userAgent = navigator.userAgent;
      if (userAgent.indexOf("Windows NT 10.0") !== -1) return "Windows 10";
      if (userAgent.indexOf("Windows NT 6.2") !== -1) return "Windows 8";
      if (userAgent.indexOf("Windows NT 6.1") !== -1) return "Windows 7";
      if (userAgent.indexOf("Windows NT 6.0") !== -1) return "Windows Vista";
      if (userAgent.indexOf("Windows NT 5.1") !== -1) return "Windows XP";
      if (userAgent.indexOf("Windows NT 5.0") !== -1) return "Windows 2000";
      if (userAgent.indexOf("Mac") !== -1) return "Mac/iOS";
      if (userAgent.indexOf("X11") !== -1) return "UNIX";
      if (userAgent.indexOf("Linux") !== -1) return "Linux";
      return "Other"
    },
    handleAcceptInvite () {
      if (!this.acceptPhone) {
        this.$elMessage.error('请输入手机号！')
        return
      } else if (!isMobile(this.acceptPhone)) {
        this.$elMessage.error('请输入正确的手机号！')
        return
      }

      this.registerForm.username = this.acceptPhone
      this.showInvite = false
      this.showLoginForm = false
      this.showRegisterForm = true
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
//   .login-container .el-input input {
//     color: $cursor;
//   }
// }

/* reset element-ui css */
.login-container {
  display: flex;
  flex-direction: column;

  .el-select {
    //   display: inline-block;
    //   height: 50px;

    // .el-input__inner {
    //   height: 50px;
    //   line-height: 50px;
    // }

    // .el-input__icon {
    //   height: 40px; // 设置高度，icon元素恢复原来的高度，这时arror才能垂直居中
    //   position: relative;
    //   top: 5px; // 元素整体上移，需要自己调整，让箭头也居中
    // }

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;
      text-align: center;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-input {
    .el-input__inner {
      height: 50px;
      line-height: 50px;
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #006FFF;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  background: url('../../assets/login/login_bg.png') no-repeat;
  background-size: 100% 100%;

  .login-form {
    position: relative;
    width: 389px; //7.294206rem;
    height: 474px; //8.888056rem;
    max-width: 100%;
    // margin-top: 1.631352rem;
    // margin-right: 1.875117rem;
    overflow: hidden;
    background: #ffffff;
    opacity: 1;
    display: flex;
    justify-content: center;
    padding-left: 0.562535rem;
    padding-right: 0.562535rem;

    .login-title {
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 28px;
      // color: #1890fc;
      opacity: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 34px;
      cursor: pointer;
    }

    .preimg {
      vertical-align: middle;
      margin-top: 5px;
      width: 17px;
      height: 20px;
      margin-left: 3px;
    }

    .pwdimg {
      margin-left: 4px;
      width: 15px;
    }

    .userinput {
      width: 329px; //6.169136rem;
      height: 50px; //0.937559rem;
      background: #ffffff;
      margin-top: 25px;
      color: #666666;
      font-size: 14px;
    }

    .codeinput {
      margin-top: 23px;
      width: 203px;
    }

    .pwdinput {
      margin-top: 23px;
    }

    .btn-sendmsg {
      margin-left: 14px;
      width: 112px;
      height: 50px;
      background: #1890fc;
      border-radius: 0.093756rem;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      opacity: 1;
    }

    .agreement-view {
      margin-top: 27px;
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      font-size: 12px;

      .readtext {
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        opacity: 1;
        line-height: 21px;
      }

      .agreement {
        font-family: PingFang SC;
        font-weight: 400;
        color: #1993fb;
        opacity: 1;
        line-height: 21px;
      }
    }

    .go-login-tip {
      margin-top: 20px;
      align-items: center;
      display: flex;
      justify-content: center;

      .has-account {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #707070;
        opacity: 1;
      }

      .go-login {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1890fc;
        opacity: 1;
        margin-left: 0.093756rem;
      }
    }
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    position: absolute;
    // padding: 6px 5px 6px 15px;
    // padding-left: 0.26rem;
    color: #cbced3;
    vertical-align: middle;
    // height: 0.3rem;
    // display: inline-block;
    // top: 0.8rem;
    top: 40px;
    height: 20px;
    padding-left: 11px;
  }

  .eye-container {
    position: absolute;
    color: #cbced3;
    vertical-align: middle;
    top: 40px;
    height: 20px;
    right: 11px;
    display: flex;
    align-items: center;
    color: #666666;

    img {
      width: 20px;
      height: 20px;
    }
  }

  .password {
    padding-left: 12px;
    width: 27px;
    top: 40px;
    height: 19px;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}

.login-view {
  width: 80%;
  display: flex;
}

.title-container {
  position: relative;
  // margin-top: 1.743859rem;
  // margin-left: 2.193887rem;
  // flex: 1;
  height: 474px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    font-size: 80px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 112px;
    color: #ffffff;
    opacity: 1;
  }

  .title-en {
    font-size: 80px;
  }

  img {
    width: 62px;
    height: 57px;
    margin-left: 20px;
  }

  .bottom-title {
    display: flex;
    align-items: center;

    img {
      width: 144px;
      height: 26px;
    }

    .project-name {
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 42px;
      color: #ffffff;
      opacity: 1;
      margin-left: 12px;
    }

    .project-name-en {
      font-size: 30px;
    }
  }
}

.inputStyle {
  width: 140px;
}

::v-deep .el-form-item {
  border: none;
  background: none;
  border-radius: 0;
  margin-bottom: 0;
  // color: #454545;
}

// 登录表单
.login-title-view {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .bluetext {
    color: #1890ff;
  }

  .greeytext {
    color: #666666;
  }
}

.forgetpwd-text {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  opacity: 1;
  margin-left: 34px;
}

// 其他登录
.other-login {
  display: flex;
  margin-top: 19px;
  align-items: center;
  justify-content: flex-start;

  .other-login-text {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: #707070;
    opacity: 1;
  }

  .other-login-img {
    width: 45px;
    height: 45px;
  }
}

.qrCode {
  width: 329px;
  height: 250px;
  border: 1px solid #dddddd;
  opacity: 1;
  border-radius: 0.093756rem;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;

  .qrcode-view {
    width: 230px;
    height: 230px;
    // background: #1890fc;
    opacity: 1;
    position: relative;
    
    .scan-success {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .success-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #07c160;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        
        i {
          color: #fff;
          font-size: 40px;
        }
      }
      
      .success-text {
        color: #07c160;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}

.demo {
  // 17px
  margin-top: 0.31877rem;
  // 15px
  margin-top: 0.281268rem;
  // 20px
  margin-top: 0.375023rem;
  // 14px
  margin-top: 14px;
}

.back_view {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #666;
}

.inviteBtn{
  background: linear-gradient(rgba(252, 240, 185), rgba(246, 193, 18));
  color:#000000;
  width: 100%; margin-top: 41px; display: inline-block;height: 50px;
  font-weight: bold;
  font-size: 18px;
  border-radius: 25px;
  border: none;
}

.disabled-btn {
  opacity: 0.6;
}
.agreement-view{

  .is-loading {
    animation: rotating 2s linear infinite;
  }
  @keyframes rotating {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
}
</style>
